<template>
  <div class="hobby-selector">
    <!-- 单选框 -->
    <el-radio-group v-model="selectedValue" class="select-container">
      <el-radio
          v-for="(option, index) in options"
          :key="index"
          :label="option.label"
      >
        {{ option.name }}
      </el-radio>
    </el-radio-group>

    <!-- 动态输入框 -->
    <div v-if="showInputs" class="input-container">
      <div v-for="(input, index) in inputCount" :key="index" class="input-item">
        <span>{{ placeFlag ? placeholder[index] : getLetter(index) }}&ensp;</span>
        <BottomBorderInput
            v-model="hobbyValues[index]"
            :placeholder="placeholder[index] !== undefined ?placeholder[index]:defaultPlaceholder"
            :width="width"
        />
      </div>
    </div>
  </div>
</template>

<script>
import BottomBorderInput from './BottomBorderInput.vue'; // 引入封装后的组件

export default {
  components: {
    BottomBorderInput,
  },

  name: 'HobbySelector',
  props: {
    // 选项配置数组，格式为 [{ name: '选项名称', label: '选项值' }]
    options: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every((item) => item.name && item.label);
      }
    },
    // 输入框的数量
    inputCount: {
      type: Number,
      default: 3
    },
    // 输入框的大小
    width: {
      type: String,
      default: '100%'
    },
    // 输入框的 placeholder
    placeholder: {
      type: Array,
    },
    // 外部传入的爱好值数组
    value: {
      type: Array,
      required: true
    },
    // 外部传入的选中选项
    selectedOption: {
      type: [String, Number],
      default: ''
    },
    // 输入框前是否显示问题placeholder
    placeFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 内部维护的选中选项
      internalSelectedOption: this.selectedOption,
      //placeholder默认值
      defaultPlaceholder: '请输入内容'
    };
  },
  computed: {
    // 选项绑定值
    selectedValue: {
      get() {
        return this.internalSelectedOption;
      },
      set(newValue) {
        this.internalSelectedOption = newValue;
        this.$emit('update:selectedOption', newValue); // 触发 update:selectedOption 事件
      }
    },
    // 爱好值绑定
    hobbyValues: {
      get() {
        return this.value;
      },
      set(newValues) {
        this.$emit('input', newValues); // 触发 input 事件，更新父组件的绑定值
      }
    },
    // 是否显示输入框
    showInputs() {
      // 默认选择第二个选项时显示输入框
      return this.selectedValue === this.options[1]?.label;
    }
  },
  watch: {
    // 监听内部选中选项变化
    selectedValue(newVal) {
      if (newVal !== this.options[1]?.label) {
        this.clearHobbies(); // 清空爱好值
      }
    },
    // 监听父组件传入的选中选项变化，同步到内部
    selectedOption(newVal) {
      this.internalSelectedOption = newVal;
    },
    // 监听 inputCount 变化，调整数组长度
    inputCount(newVal) {
      this.adjustHobbyValues(newVal);
    }
  },
  methods: {
    // 根据 index 获取字母
    getLetter(index) {
      return String.fromCharCode(97 + index); // 97 是 'a' 的 ASCII 码
    },
    // 清空爱好值
    clearHobbies() {
      this.hobbyValues = Array(this.inputCount).fill('');
    },
    // 调整数组长度
    adjustHobbyValues(newCount) {
      if (newCount > this.hobbyValues.length) {
        // 如果新长度大于当前长度，填充空字符串
        this.hobbyValues = this.hobbyValues.concat(Array(newCount - this.hobbyValues.length).fill(''));
      } else if (newCount < this.hobbyValues.length) {
        // 如果新长度小于当前长度，截取数组
        this.hobbyValues = this.hobbyValues.slice(0, newCount);
      }
    }
  }
};
</script>

<style scoped>
.hobby-selector {
  margin-bottom: 20px;
}

.select-container {
  display: flex;
  flex-wrap: wrap; /* 如果选项过多，可以换行 */
  margin-top: 10px;
  margin-left: 10px;
}

.input-container {
  margin: 10px 20px;
  font-size: 14px;
  /*line-height: 14px;*/
}

.input-item p{
  line-height: 14px;
}

</style>
